﻿@model PagedList<Sys_Role>
@{
    ViewBag.ParentUrl = "/Role/Index";
    ViewBag.Title = "角色管理";
}
@section headerCss
{
    <link rel="stylesheet" href="~/assets/js/ztree/skin/metroStyle.css" type="text/css">
}
@section breadcrumb
{
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="/">控制台</a>
        </li>
        <li class="active">@ViewBag.Title</li>
    </ul><!-- .breadcrumb -->
}
<div class="row">
    <div class="col-xs-12">
        <div class="clearfix">
            <div class="pull-right">
                <button class="btn btn-white btn-info btn-round" data-toggle="modal" data-target="#roleModal">
                    <i class="ace-icon fa fa-plus bigger-120 blue"></i>
                    添加
                </button>
            </div>
        </div>
        <div class="space-4"></div>

        <div class="table-responsive">
            <!-- PAGE CONTENT BEGINS -->
            <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>角色名</th>
                        <th>描述名</th>
                        <th>状态</th>
                        <th>备注</th>
                        <th>录入时间</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>

                            <td>@item.R_Name</td>
                            <td>@item.R_DisplayName</td>
                            <td>@UtilPartialView.YesOrNo("是", "否", item.R_State == 1)</td>
                            <td>@item.R_Memo</td>
                            <td>@item.R_Time</td>
                            <td>
                                @if (item.R_State == 1)
                                {
                                    <div class="btn-group">
                                        <button class="btn btn-xs btn-success tooltip-success btnOption" data-rel="tooltip" data-placement="top" title="恢复角色" data-id="@item.R_Id">
                                            恢复
                                            <i class="ace-icon fa fa-unlock bigger-120"></i>
                                        </button>
                                    </div>
                                }
                                else if (item.R_State == 0)
                                {
                                    <div class="btn-group">
                                        <button class="btn btn-xs btn-danger tooltip-error btnOption" data-rel="tooltip" data-placement="top" title="删除角色" data-id="@item.R_Id">
                                            删除
                                            <i class="ace-icon fa fa-lock bigger-120"></i>
                                        </button>
                                    </div>

                                }
                                <div class="btn-group">
                                    <button class="btn btn-xs btn-info tooltip-info" data-rel="tooltip" data-placement="top" title="编辑角色" name="btnEdit" data-id="@item.R_Id" data-name="@item.R_Name" data-disname="@item.R_DisplayName" data-memo="@item.R_Memo" data-state="@item.R_State">
                                        编辑
                                        <i class="ace-icon fa fa-edit bigger-120"></i>
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <a class="btn btn-xs btn-inverse tooltip-info btnPermission" data-rel="tooltip" data-placement="top" title="分配权限" data-id="@item.R_Id">
                                        权限
                                        <i class="ace-icon fa fa-sitemap bigger-120"></i>
                                    </a>
                                </div>


                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>

        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->
<!--权限分配model-->
<div class="modal fade" id="menuModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">用户角色</h4>
            </div>
            <div class="modal-body">
                @Html.Hidden("hidId")
                <ul id="treeRole" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btnSavePermission">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--新增角色 model-->
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">编辑角色</h4>
            </div>
            <form class="form-horizontal" role="form" id="frmRole" method="POST" novalidate="novalidate" action="/Role/Edit">
                <input type="hidden" id="R_Id" name="R_Id" value="" />
                <div class="modal-body">
                    <!-- #section:elements.form -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="R_Name"> 角色名</label>
                        <div class="col-sm-9">
                            <input type="text" id="R_Name" name="R_Name" placeholder="角色名/英文" class="col-xs-10 col-sm-8" required data_max="20" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="R_DisplayName"> 描述名</label>
                        <div class="col-sm-9">
                            <input type="text" id="R_DisplayName" name="R_DisplayName" placeholder="描述名/中文" class="col-xs-10 col-sm-8" required data_max="20" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right" for="R_Memo"> 备注</label>
                        <div class="col-sm-9">
                            <textarea class="col-xs-10 col-sm-8" id="R_Memo" name="R_Memo" placeholder="角色备注"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right"> 状态 </label>
                        <div class="col-sm-9">
                            <label>
                                <input name="R_State" type="radio" class="ace" value="0" required>
                                <span class="lbl"> 正常</span>
                            </label>
                            <label>
                                <input name="R_State" type="radio" class="ace" value="1" required>
                                <span class="lbl"> 冻结</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="btnSaveRole">保存</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

@section footerScript{
    <!-- page specific plugin scripts -->
    <script src="~/assets/js/ztree/jquery.ztree.core.min.js"></script>
    <script src="~/assets/js/ztree/jquery.ztree.excheck.min.js"></script>
}
@section footer{
    <script src="/assets/js/bootbox.min.js"></script>
    <script src="/assets/js/validation/jquery-html5Validate.js"></script>
    <script>
        $.testRemind.css = {
            zIndex: 9999
        };
        $("#frmRole").html5Validate(function () {
            this.submit();
        }, {

        });


        $(function () {
            /**
            *编辑角色基本信息
            */
            $('button[name="btnEdit"]').on('click', function () {
                $('#R_Id').val($(this).data('id'));
                $('#R_Name').val($(this).data('name'));
                $('#R_DisplayName').val($(this).data('disname'));
                //$('#R_State').val($(this).data('state'));
                $("input[name='R_State'][value=" + $(this).data('state') + "]").prop("checked", true);
                $('#R_Memo').val($(this).data('memo'));
                $('#roleModal').modal('show');
                //console.log($(this).data('id'));
            });

            $('.btnOption').on('click', function () {
                var pid = $(this).data("id");
                bootbox.confirm("确定变更此角色信息？", function (o) {
                    if (o) {
                        $.post('/Role/Forzen', { id: pid }, function (o) {
                            if (o.State == 0) {
                                bootbox.alert("角色信息已做变更！", function () {
                                    location.reload();
                                });
                            }
                        });
                    }
                });
            });
            //////
            //权限分配
            $('.btnPermission').on('click', function () {
                var setting = {
                    check: {
                        enable: true
                    },
                    view: {
                        showIcon: false
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };
                var pid = $(this).data("id");
                $('#hidId').val(pid);
                $.post('/Role/QueryPermission', { id: pid }, function (o) {
                   // console.log(JSON.stringify(o));
                    $.fn.zTree.init($("#treeRole"), setting, eval(o));
                    //手动显示模态框
                    $('#menuModal').modal('show');
                });
            });
            //保存权限
            $('#btnSavePermission').on('click', function () {
                var zTree = $.fn.zTree.getZTreeObj("treeRole");
                var isChkAll = zTree.getNodesByParam("id", "0")[0].getCheckStatus();
                var roleStr = '';
                if (isChkAll.checked && (!isChkAll.half)) {  //全选咯
                    roleStr = '*';
                } else {
                    //所有选中的节点
                    var checkNodes = zTree.getCheckedNodes(true).map(function (o) {
                        //return JSON.stringify({ id: this.id, pId: this.pId, name: this.name, title: this.title, checked: this.checked, open: this.open});
                        return { id: o.id, pId: o.pId, name: o.name, checked: o.checked, open: o.open };
                    });
                    roleStr = JSON.stringify(checkNodes);
                }

                //console.log(roleStr);
                var pid = $('#hidId').val();
                $.post('/Role/SavePermission', { id: pid, str: roleStr }, function (o) {
                    if (o.State == 0) {
                        //手动隐藏模态框
                        $('#menuModal').modal('hide');
                    } else {
                        var tips = o.Message || "角色权限保存失败!";
                        bootbox.alert(tips);
                    }
                });
                //console.log(chkAll.getCheckStatus().checked && (!chkAll.getCheckStatus().half));
            });

        });
    </script>
}